<template>
  <div>
    <h2>专利数量</h2>
    <div id="patent"/>
  </div>
</template>

<script>
import {QueryPatentStatistics} from "../../../network/patentApi";

export default {
  name: "patentChart",
  methods: {
    myEcharts() {
      let myCharts = this.$echarts.init(document.getElementById("patent"));
      QueryPatentStatistics({showMessage: 1}).then(res => {
        let year = res.data.countGroupByMonth;
        myCharts.setOption({
          textStyle: {
            color: '#FFFFFF',
          },
          label: {
            show: true,
            formatter: '{c}',
            color: '#ffffff',
            // fontSize: '12',
          },
          xAxis: {
            type: 'category',
            data: year.map(i => i.month).reverse()
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: year.map(i => i.count).reverse(),
            type: 'line'
          }]
        })
      }).catch(() => {
        // this.myEcharts()
      })
      myCharts.setOption({});
    },
  },
  mounted() {
    this.myEcharts()
  }
}
</script>

<style scoped>
#patent {
  height: 400px;
  width: 658.08px;
  background: #0F373F;
}

h2 {

  font-size: 30px;
  text-align: center;
  color: #FFFFFF;
}
</style>